<!DOCTYPE html>
<html lang="en">
<head>
    <title>管理系统 - 管理中心</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- CSS Libs -->
    <link rel="stylesheet" type="text/css" href="../lib/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/animate.min.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/bootstrap-switch.min.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/checkbox3.min.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/jquery.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/dataTables.bootstrap.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/select2.min.css">
    <link href="../lib/css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">	
    <!-- CSS App -->
    <link rel="stylesheet" type="text/css" href="../css/style.css">
    <link rel="stylesheet" type="text/css" href="../css/themes/flat-blue.css">
	<style type="text/css">
    .table>tbody>tr>td{height:38px; line-height: 38px}
        .f{ float: left; width:40px; }
        .listInput{ width:150px }
        .bt{ margin-left:15px }
        .pointer{ cursor: pointer }
        .sort{ color:#5bc0de}
        .info{ color:#1b6d85 }
        .danger{ color:#ff0000 }
        .primary{ color:#3c763d }
        .rowEnable{ background-color: #fff }
        .rowDisabled{ background-color: #F7F7F7 }
        .mr{ margin-right: 10px}
        .ml{ margin-left: 10px}
        input[type="text"]{ height:30px; }
        input[type="radio"]{ margin-left:6px }
        select{ height:25px;  }
        #myModalLabel{ height:35px;}
        #editForm{overflow-x:hidden;overflow-y:auto; max-height:500px}

    </style>
</head>

<body class="flat-blue">
    <div class="app-container">
        <div class="row content-container">
            <nav class="navbar navbar-default navbar-fixed-top navbar-top">
                <div class="container-fluid">
                    <div class="navbar-header">
                        <button type="button" class="navbar-expand-toggle">
                            <i class="fa fa-bars icon"></i>
                        </button>
                        <ol class="breadcrumb navbar-breadcrumb">
                            <li class="active" style="font-family:仿宋">管理系统</li>
                        </ol>
                        <button type="button" class="navbar-right-expand-toggle pull-right visible-xs">
                            <i class="fa fa-th icon"></i>
                        </button>
                    </div>
                    <ul class="nav navbar-nav navbar-right">
                        <button type="button" class="navbar-right-expand-toggle pull-right visible-xs">
                            <i class="fa fa-times icon"></i>
                        </button>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-comments-o"></i></a>
                            <ul class="dropdown-menu animated fadeInDown">
                                <li class="title">
                                    Notification <span class="badge pull-right">0</span>
                                </li>
                                <li class="message">
                                    No new notification
                                </li>
                            </ul>
                        </li>
                        <li class="dropdown danger">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-star-half-o"></i> 4</a>
                            <ul class="dropdown-menu danger  animated fadeInDown">
                                <li class="title">
                                    Notification <span class="badge pull-right">4</span>
                                </li>
                                <li>
                                    <ul class="list-group notifications">
                                        <a href="#">
                                            <li class="list-group-item">
                                                <span class="badge">1</span> <i class="fa fa-exclamation-circle icon"></i> new registration
                                            </li>
                                        </a>
                                        <a href="#">
                                            <li class="list-group-item message">
                                                view all
                                            </li>
                                        </a>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li class="dropdown profile">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Lucy <span class="caret"></span></a>
                            <ul class="dropdown-menu animated fadeInDown">
                                <li class="profile-img">
                                    <img src="../img/profile/picjumbo.com_HNCK4153_resize.jpg" class="profile-img">
                                </li>
                                <li>
                                    <div class="profile-info">
                                        <h4 class="username">Emily Hart</h4>
                                        <p>emily_hart@email.com</p>
                                        <div class="btn-group margin-bottom-2x" role="group">
                                            <button type="button" class="btn btn-default"><i class="fa fa-user"></i> 权限</button>
                                            <button type="button" class="btn btn-default"><i class="fa fa-sign-out"></i> 推出</button>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </nav>
            <div class="side-menu sidebar-inverse">
                <nav class="navbar navbar-default" role="navigation">
                    <div class="side-menu-container">
                        <div class="navbar-header">
                            <a class="navbar-brand" href="#">
                                <div class="icon fa fa-cloud"></div>
                                <div class="title">Cloud Platform</div>
                            </a>
                            <button type="button" class="navbar-expand-toggle pull-right visible-xs">
                                <i class="fa fa-times icon"></i>
                            </button>
                        </div>
                        <ul class="nav navbar-nav">
                            <li class="">
                                <a href="index.html">
                                    <span class="icon fa fa-desktop"></span><span class="title">控制台</span>
                                </a>
                            </li>
                            <li class="panel panel-default dropdown">
                                <a data-toggle="collapse" href="#dropdown-element">
                                    <span class="icon fa fa-wrench"></span><span class="title">表单管理</span>
                                </a>
                                <!-- Dropdown level 1 -->
                                <div id="dropdown-element" class="panel-collapse collapse">
                                    <div class="panel-body">
                                        <ul class="nav navbar-nav">
                                            <li><a href="formConfig.html">表单设置</a>
                                            </li>
                                            <li><a href="#">其它设置</a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </li>
                            <li class="panel panel-default dropdown">
                                <a data-toggle="collapse" href="#dropdown-data">
                                    <span class="icon fa fa-database"></span><span class="title">数据管理</span>
                                </a>
                                <!-- Dropdown level 1 -->
                                <div id="dropdown-data" class="panel-collapse collapse">
                                    <div class="panel-body">
                                        <ul class="nav navbar-nav">
                                            <li><a href="formDevice.html">数据录入</a>
                                            </li>
                                            <li><a href="showDevice.html">数据管理</a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </li>
                            <!-- Dropdown-->
                            <li class="panel panel-default dropdown">
                                <a data-toggle="collapse" href="#dropdown-chart">
                                    <span class="icon fa fa-area-chart"></span><span class="title">数据分析</span>
                                </a>
                                <!-- Dropdown level 1 -->
                                <div id="dropdown-chart" class="panel-collapse collapse">
                                    <div class="panel-body">
                                        <ul class="nav navbar-nav">
                                            <li><a href="chartMap.html">地理分布</a>
                                            </li>
                                            <li><a href="companyList.html">公司信息</a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </li>
                            <li class="panel panel-default dropdown">
                                <a data-toggle="collapse" href="#dropdown-user">
                                    <span class="icon fa fa-user"></span><span class="title">用户管理</span>
                                </a>
                                <!-- Dropdown level 1 -->
                                <div id="dropdown-user" class="panel-collapse collapse">
                                    <div class="panel-body">
                                        <ul class="nav navbar-nav">
                                            <li><a href="pages/login.html">用户列表</a>
                                            </li>
                                            <li><a href="pages/index.html">权限管理</a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <!-- /.navbar-collapse -->
                </nav>
            </div>
            <div class="copyrights">Collect from <a href="http://www.cssmoban.com/" >免费网站模板</a></div>
            <!-- Main Content -->
            <div class="container-fluid" ng-app="myApp" ng-controller="myCtrl" >
                <div class="side-body padding-top" style="background-color:#fff; bottom: 45px; position:absolute; top:0px; left:0px; right:0px">
                    
                    <div class="" style="height:100%">
                        <!------------------------------------------>
						<div style="width:99%; margin-bottom:20px; height:100%; background-color:#404a59; ">
							<div class="col-md-3" style="height:100%; position:relative ">
                                <div id="L1" style="right:10px;position:absolute;width:200px;height:100px; bottom:250px"></div>
                                <div id="L2" style="right:10px;position:absolute;width:200px;height:100px; bottom:150px"></div>
                                <div id="L3" style="right:10px;position:absolute;width:200px;height:100px; bottom:50px"></div>
                            </div>
                            <div class="col-md-6" style="height:100%">
                                <div style="text-align:center; color:#00ffff; vertical-align:middle; padding-top:20px; ">
                                    <div style="font-size:18px">
                                        全国深冷空分装置分布概况
                                    </div>
                                    <div style="font-size:12px">
                                        ···············································
                                    </div>
                                </div>
                                <div id="view1" style="width:100%;top:80px; bottom:0px;position:absolute;">
                                </div>
                            </div>
                            <div class="col-md-3" style="height:100%">

                            </div>
                            

                        </div>
                        <!------------------------------------------>
						
                    </div>
					<div class="row  no-margin-bottom">
					</div>
                </div>
            </div>
        </div>
        <footer class="app-footer">
            <div class="wrapper">
                <span class="pull-right">2.1 <a href="#"><i class="fa fa-long-arrow-up"></i></a></span> © 2015 Copyright. More Templates <a href="http://www.cssmoban.com/" target="_blank" title="">**科技有限公司</a> - Collect from <a href="#" title="管理系统" target="_blank">管理系统</a>
            </div>
        </footer>
        <div>
            <!-- Javascript Libs -->
            <script type="text/javascript" src="../lib/js/jquery.min.js"></script>
            <script type="text/javascript" src="../lib/js/bootstrap.min.js"></script>
            <script type="text/javascript" src="../lib/js/bootstrap-switch.min.js"></script>
            <script type="text/javascript" src="../lib/js/jquery.matchHeight-min.js"></script>
            <script type="text/javascript" src="../lib/js/jquery.dataTables.min.js"></script>
            <script type="text/javascript" src="../lib/js/dataTables.bootstrap.min.js"></script>
            <script type="text/javascript" src="../lib/js/select2.full.min.js"></script>
            <script type="text/javascript" src="../lib/js/echarts.v3.min.js"></script>
            
            <script src="../lib/js/bootstrap-datetimepicker.min.js"></script>
			<script src="../lib/js/bootstrap-datetimepicker.zh-CN.js"></script>
			

            <!-- Javascript -->
            <script type="text/javascript" src="../js/app.js"></script>
            <script type="text/javascript" src="../js/index.js"></script>
			<script type="text/javascript" src="../js/public.js"></script>
			<script type="text/javascript" src="../js/citys.js"></script>
            <script type="text/javascript" src="../js/public.js"></script>
            <script type="text/javascript" src="../js/china.js"></script>
			
<script language="javascript">
    function cout(obj){ console.log(obj); }

    function drawMap(id, data){
        var colors = ['#ff0000', '#a6c84c', '#ffa022', '#46bee9', '#3CB371', '#00ffff'];
        var maxV = 0;
        function convertData(data) {
            var res = [];
            data.forEach(function(d) {
                var coords = getCityPosEx(d.name);
                if(coords==null) return;
                coords.push(d.value);
                if(maxV<d.value)maxV = d.value
                res.push({
                    name: d.name,
                    value: coords
                });
            })
            return res;
        }

        var series = Object.keys(data).map(function(cls, i){
            return {
                name:cls, type:'effectScatter',
                coordinateSystem: 'geo', zlevel: 2,
                rippleEffect: { period: 4, brushType: 'stroke', scale: 4 },
                label: {
                    emphasis: { position:'right', show: true, formatter: function(p){
                        return p.name + ", " + cls + ", 数量：" + p.value[2]
                    }}
                },
                symbol: 'circle',
                symbolSize: function(val) {
                    return 3 + val[2] / maxV * 10;
                },
                itemStyle: { normal: { show: false, color: colors[i] } },
                data: convertData(data[cls])
            };
        });

       var option = {
            backgroundColor: '#404a59',
            legend:{ data:Object.keys(data), textStyle:{color:"#fff"}},
            geo: {
                map: 'china', roam: true,
                label: { emphasis: { show: false } },
                layoutCenter: ['50%', '53%'], layoutSize: "108%",
                itemStyle: {
                    normal: {
                        color: 'rgba(51, 69, 89, .5)', borderColor: 'rgba(100,149,237,1)'
                    },
                    emphasis: { color: 'rgba(37, 43, 61, .5)' }
                }
            },
            series: series
        };

        cout(option);
        Init3(option, id);
    }


    function loadMap(id){
        ajaxData('get_chart_map', {}, function(rst){
            var data = rst.data;
            drawMap(id, data)

        });
    }

    drawGauge("L1");
    drawGauge("L2");
    drawGauge("L3");
    

    function drawGauge(id){
        var common = {

        };
        var option = {
            "series": [{
                radius:'99%',
                type: "gauge",
                startAngle: 200,
                endAngle: -20,
                splitNumber: 10,
                axisLine: {
                    lineStyle: {
                        color: [
                            [0.3, '#3fa7dc'], [0.5, '#fbe010'],
                            [0.8, '#fb5310'], [1.0, "#c23531"]
                        ],
                        width: 5
                    }
                },
                axisLabel: { show:false },
                splitLine: { length: 5 },
                axisTick: {
                    lineStyle: { color: "#fff", width: 2 },
                    length: 0, splitNumber: 1
                },
                title: {
                    show: true,
                    "offsetCenter": ["0", "50%"],
                    "textStyle": { "color": "#2d99e2", "fontSize": 20 }
                },
                pointer: { show: true, width:0 },
                detail: { show: false },
                center: ["50%", "55%"], 
                data: [{
                    name: "29.8万",
                    value: 0
                }]
            }, {
                type: "gauge",
                radius: '75%',
                startAngle: 200, 
                endAngle: -20,
                center: ["50%", "55%"], 
                axisTick: { "show": false },
                axisLabel: { "show": false },
                splitLine: { "show": false },
                detail: { "show": false },
                axisLine: {
                    lineStyle: {
                        "width": 20, 
                        "color": [[0.298, "#2d99e2"], [1, "#dce3ec"]]
                    }
                },
                pointer: {
                    "width": 6, //指针的宽度
                    "length": "80%", //指针长度，按照半圆半径的百分比
                    "color": "#2d99e2"
                },
                title: {
                    "show": true,
                    "offsetCenter": ['0%', "65%"], //标题位置设置
                    "textStyle": { "color": "#2d99e2", "fontSize": 12 }
                },
                "data": [{  "value": 29.8, "name": ""}]
            }]
        };

        Init3(option, id);
    }

    $(document).ready(function(){
        loadMap("view1");
        /*
        $('.date').datetimepicker({
            format: 'yyyy-mm-dd', language:'zh-CN', autoclose:true, minView:"month"
        });
        */
    });


	</script>
			
			
</body>

</html>
